<template>
	<view class="traffic">
		<view class="title-image">
			<view @click="back()" style="position:absolute;top:100upx;left:25upx;z-index: 9999; border-radius: 50%;width: 50upx;height: 50upx; display: flex;justify-content: center;align-items: center;">
				<text style="font-size: 36upx;color: #fff;" class="back iconfont icon-left"></text>
			</view>
			<image :src="dataImage" mode=""></image>
		</view>
		<!-- <view class="line-1"></view> -->
		<view class="box-a">
			<view class="box">
				<block v-for="(item,index) in tabList" :key='index'>
					<view class="img-box" @click="gotrafficDetail(item.id)">
						<view class="list-box">
							<view class="image-info">
								<image :src="item.url" mode=""></image>
							</view>
							<view class="title-info">
								<text>{{item.name}}</text>
							</view>	
						</view>	
					</view>
				</block>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList:[],
				poiType:'',
				dataImage:'https://sz.smates.cn/filemanager/file/view/52c8ca3933c14903be91dd921f9a0d0d/full'
				// chongdian:"https://sz.smates.cn/filemanager/file/view/72a511995454444790ea54b13e5ce7f1/full",
				// wangdian:"https://sz.smates.cn/filemanager/file/view/136d145738e44696ab409f8744127d77/full"
			};
		},
		onLoad:function(){
			this.getPOIType()
		},
		methods:{
			back:function(){
				uni.navigateBack({
					delta:-1
				})
			},
			//获取poi分类
			getPOIType:function(){
				let params = {
					attribute:'poi-交通'
				}
				this.$postApi(this.$path.GET_POI_TYPE,params).then(res => {
					console.log("poi分类返回数据------------->",res.data)
					let list = res.data.data.list
					let temp = []
					list.forEach(item => {
						item.otherImage = this.pub.delLastf(item.otherImage)
						temp.push(
							{
								name:item.name,
								id:item.code,
								url:item.otherImage
							}
						)
					})
					this.tabList = temp					
					this.poiType = this.tabList[0].id
				})
			},
			gotrafficDetail:function(code){
				console.log("code--->",code)
				switch(code){
					//汽车充电站
					case '300002301':
					// uni.navigateTo({
					// 	url: '/pages/traffic/trafficDetail?id='+ code,
					// 	animationType: "pop-in",
					// 	animationDuration: 200
					// })
					uni.navigateTo({
						url: '/pages/traffic/comission/comission?type=3',
						animationType: "pop-in",
						animationDuration: 200
					})
					break;
					//共享汽车租赁
					case '300002401':
					uni.navigateTo({
						url: '/pages/traffic/comission/comission?type=4',
						animationType: "pop-in",
						animationDuration: 200
					})
					break;
					//客运站信息
					case '300002601':
					uni.navigateTo({
						url: '/pages/traffic/comission/comission?type=2',
						animationType: "pop-in",
						animationDuration: 200
					})
					break;
					//路段天气
					case '300002701':
					uni.navigateTo({
						url: '/pages/traffic/weather/weather',
						animationType: "pop-in",
						animationDuration: 200
					})
					break;
					//售票代售点
					case '300002801':
					uni.navigateTo({
						url: '/pages/traffic/comission/comission?type=1',
						animationType: "pop-in",
						animationDuration: 200
					})
					break;
					//服务区
					case '300002901':
					uni.navigateTo({
						url: '/pages/traffic/service/service',
						animationType: "pop-in",
						animationDuration: 200
					})
					break;
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.traffic{
		width: 100%;
		min-height: 100%;
		// height: 100%;
		background: #F0F0F0;
		font-size: 34upx;
	}
	.box-a{
		height: 100%;
	}
	.box{
		width: 100%;
		// height: 100%;
		background: #F0F0F0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 34upx 64upx;
	}
	.title-image{
		width: 100%;
		height: 450upx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.line-1{
		width: 100%;
		height: 1px;
		background: #ECECEC;
	}
	.img-box{
		// padding: 30upx 20upx 0 20upx;
		display: flex;
		// flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 34upx;
		background: #fff;
		width: 293upx;
		height: 238upx;
		border-radius: 10upx;
		.list-box{
			display: flex;
			// text-align: center;
			flex-direction: column;
			align-items: center;
			height: 130upx;
			justify-content: space-between;
		}
		.image-info{
			width: 93upx;
			height: 68upx;
		}
		.title-info{
			font-size: 30upx;
			color: #666;
			font-family: PingFang-SC-Medium;
		}
		image{
			width: 100%;
			height: 100%;
			// border-radius: 10upx;
		}
	}
</style>
